﻿@charset "UTF-8";

/**
 * @desc 通用组件类
 * @author kyle
 * @date 2020-07-31
 * @inrto 包含以下通用组件css
 *   按钮，线性列表
 */

/* 单排双按钮
----------------------------------------------------------------*/
.btn-box {
  @include flex-justify();
  button {
    flex-grow: 1;
  }
  button:first-child {
    margin-right: 30px;
  }
}
/* 实心背景色btn*/
.solid-btn {
  padding: 0 20px;
  @include bg-primary;
  @include border-primary;
  color: #fff !important;
}
/* 空心背景色btn*/
.hollow-btn {
  padding: 0 20px;
  @include border-primary;
  @include color-primary;
  border: 1px solid currentColor;
  background-color: transparent !important;
}
// 空心字体颜色
.hollow-btn-current {
  padding: 0 20px;
  border: 1px solid currentColor;
  background-color: transparent !important;
}

/* 实心红色btn*/
.solid-btn-danger {
  padding: 0 20px;
  background: $red;
  border-color: $red;
  color: #fff !important;
}

/*单选框样式
----------------------------------------------------------------*/
.radio-box {
  @include chose-box;
}
.radio-box-active {
  border: 1px solid;
  @include border-primary;
  &:after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 100%;
    @include bg-primary;
    position: absolute;
    top: 9px;
    left: 9px;
  }
}

/*优惠券多选框样式
----------------------------------------------------------------*/
.check-box {
  @include chose-box(40px, 40px, $colorF5, $color9);
  position: relative;
}
.check-box-active {
  @include color-primary;
  font-size: 40px;
}
